import { history, useLocation, Outlet } from "umi";
import { SafeArea, TabBar } from "antd-mobile";
import "./index.less";
import {
  AppOutline,
  CollectMoneyOutline,
  ContentOutline,
  MessageOutline,
  UnorderedListOutline,
  UserCircleOutline,
  UserContactOutline,
  UserOutline,
} from "antd-mobile-icons";
import { useUserStore } from "@/store";
import { useEffect } from "react";

const Bottom: React.FC = () => {
  const location = useLocation();
  const { pathname } = location;
  const { getUserInfo } = useUserStore();

  useEffect(() => {
    getUserInfo();
  }, []);

  const setRouteActive = (value: string) => {
    history.push(value);
  };

  const tabs = [
    {
      key: "/home",
      title: "客户",
      icon: <UserContactOutline />,
    },
    {
      key: "/assets",
      title: "房源",
      icon: <CollectMoneyOutline />,
    },
    // {
    //   key: "/service",
    //   title: "服务流程",
    //   icon: <ContentOutline />,
    // },
    {
      key: "/mine",
      title: "我的",
      icon: <UserCircleOutline />,
    },
  ];
  return (
    <TabBar
      activeKey={pathname}
      onChange={(value) => setRouteActive(value)}
      safeArea
    >
      {tabs.map((item) => (
        <TabBar.Item key={item.key} icon={item.icon} title={item.title} />
      ))}
    </TabBar>
  );
};
export default function Layout() {
  return (
    <div>
      <div className="body-content min-h-[calc(100vh-70rpx)]">
        <Outlet />
      </div>
      <div className="fixed bottom-0 w-full bg-white h-70rpx">
        <Bottom />
        <div style={{ background: "#ffcfac" }}>
          <SafeArea position="bottom" />
        </div>
      </div>
    </div>
  );
}
